<template>
	<view class="content">
		<view class="top-bar">
			<view class="top-bar-left" @tap="back()">
				<image src="../../static/images/common/back.png" class="back-img"></image>
			</view>
			<view class="top-bar-right">
				<image src="../../static/images/register/gb2x.png" class="cancel"></image>
			</view>
		</view>
		<view class="profilePhoto">
			<image :src="user.profilePhoto"></image>
			<view @tap="getProfilePhoto()">随机获取一个头像</view>
		</view>
		<view class="main">
			<view class="title">
				注册
			</view>
			<view class="input">
				<view class="input-div">
						<input type="text"  v-model="user.nickname" placeholder="请输入昵称/网名" class="user" placeholder-style="color:#aaa;font-weight:400;" />
					<view class="employ" v-if="employ">
					已经被别人占用了！	
					</view>
					<image src="../../static/images/register/ok.png" class="ok" v-if="isu"></image>
				</view>
					<view class="input-div">
							<input type="text"  placeholder="请输入手机号" v-model="user.username" class="email" placeholder-style="color:#aaa;font-weight:400;"  @blur="isEmail()"  />
						<view class="employ" v-if="employ">
						已经被别人占用了！	
						</view>
						<view class="employ" v-if="emailInValid">
						邮箱无效
						</view>
						<image src="../../static/images/register/ok.png" class="ok" v-if="isemali" ></image>
						</view>
			<view class="input-div">
				<input  type="password"  placeholder="请输入密码" v-model="user.password" class="pwd" placeholder-style="color:#aaa;font-weight:400;"  />
				<view class="employ" v-if="employ">
				已经被别人占用了！	
				</view>
				<image src="../../static/images/register/ck2x.png" class="look" v-if="look" @click="looks()"></image>
				<image src="../../static/images/register/gbck.png" class="Nolook" v-if="!look" @click="looks()"></image>
				</view>
				
			</view>
			<!-- <view class="tips">
				用户名或密码错误！
			</view> -->
		</view>
		<view class="submit" @tap="register()">
			注册
		</view>
	</view>
</template>

<script>
	import request from '../../api/request.js';
	export default {
		data() {
			return {
			type:'password',
			isu:true,//用户名是否可用
			isemali:false,//邮箱是否可用
			look:true,//是否查看密码
			emailInValid:false,//邮箱1无效,
			employ:false,
			email:'',
			user:{
				nickname:'',
				password:'',
				username:'',
				profilePhoto:'../../static/images/login/huo2x.png'
			},
			
			}
		},
		methods: {
			looks:function(){
				if(this.look){
					this.type="text";
					this.look=!this.look
				}
				else{
					this.type="password";
					this.look=!this.look
				}
				
			},
			//判断是否是邮箱格式
			isEmail:function(){
				let reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
				//console.log(this.email)
				if(this.email.length>0){
					if(reg.test(this.email)){
						this.emailInValid = false
					}else{
						this.emailInValid = true
					}
				}
			},
			//返回登录页面
			back(){
				uni.navigateBack({
					delta:1
				})
			},
		async getProfilePhoto(){
			uni.request({
			    url: 'https://api.muxiaoguo.cn/api/sjtx?method=pc', //仅为示例，并非真实接口地址。
			    success: (res) => {
			        this.user.profilePhoto = res.data.data.imgurl;
			       // this.text = 'request success';
			    }
			});
		},
		async register(){
			var that = this
				let res = await request({
					url: '/user/register',
					data: {
						username:this.user.username,
						nickname:this.user.nickname,
						password:this.user.password,
						profilePhoto:this.user.profilePhoto
					},
					method: 'POST'
				});
				res = res[1].data;
				console.log(res)
				if(res.code == 200){
					uni.showToast({
						title: "注册成功",
						duration: 2000
					});
					setTimeout(()=>{
						uni.navigateTo({
							url:"../login/login"
						})
					},2100)
					}
			}
		}
	}
</script>

<style lang="scss">
	.content{
		padding-top: var(--status-bar-height);
	}
	.top-bar {
		position: fixed;
		z-index: 1001;
		top: 0;
		left: 0;
		width: 100%;
		height: 44px;
		padding-top: var(--status-bar-height);
		background: $uni-bg-color;
		.top-bar-left{
			float: left;
			padding-left: 32rpx;
			 // background-color: #eee;
			width: 88rpx;
			height: 88rpx;
			.back-img{
				margin-top: 21rpx;
				width: 46rpx;
				height: 46rpx;
			}
		}

		.top-bar-right {
			float: right;
			padding-right: 32rpx;
			// width: 88rpx;

			height: 88rpx;
			.cancel {
				margin-top: 21rpx;
				width: 46rpx;
				height: 46rpx;
			}
		}
	}
	.profilePhoto{
		text-align: center;
		image{
			padding-top: 256rpx;
			width: 300rpx;
			height: 300rpx;
			margin: 0 auto;
			border-radius: 20rpx 20rpx;
		}
	}
	.main{
		padding: 54rpx $uni-spacing-row-lg 120rpx;
		// width: 100%;
		.title{
			font-family: PingFangSC-Medium;
			font-size: 56rpx;
			color: $uni-text-color;
			font-weight: 500;
			line-height: 80rpx;
		}
		.input{
			padding-top: 8rpx;
			
			input{
				padding-top: 40rpx;
				height: 88rpx;
				font-family: AvenirNext-Medium;
				font-size: $uni-font-size-lg;
				color: $uni-text-color;
				font-weight: 500;
				line-height:88rpx ;
				border-bottom: 1px solid $uni-border-color;
			}
		}
		.input-div{
			position: relative;
		}
		.employ{
			position: absolute;
			right: 0;
			top: 40rpx;
			float: right;
			font-family: PingFangSC-Medium;
			font-size: 28rpx;
			color: $uni-color-warning;
			letter-spacing: 0;
			font-weight: 500;
			line-height: 88rpx;
		}
		.ok{
			position: absolute;
			right: 0;
			top: 76rpx;
			width: 42rpx;
			height: 32rpx;
		}
		.Nolook{
			position: absolute;
			right: 0;
			top: 76rpx;
			width: 32rpx;
			height:18rpx;
		}
		.look{
			position: absolute;
			right: 0;
			top: 66rpx;
			width: 32rpx;
			height: 32rpx;
		}
		// .tips{
		// 	float: left;
		// 	font-family: AvenirNext-Medium;
		// 	font-size: $uni-font-size-lg;
		// 	color: $uni-color-warning;
		// 	line-height:56rpx ;
			
		// }
	}
	.submit{
		margin: 0 auto;
		width: 520rpx;
		height: 96rpx;
		background: $uni-color-primary;
		box-shadow: 0px 50rpx 32rpx -36rpx rgba(255,228,49,0.4);
		border-radius: 48rpx;
		font-family: PingFangSC-Medium;
		font-size: $uni-font-size-lg;
		color: $uni-text-color;
		font-weight: 500;
		line-height: 96rpx;
		text-align: center;
	}
</style>
